<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<script setup>
import FilterBar from '@/components/FilterBar.vue'
import LevelActivityItem from '@/components/LevelActivityItem.vue'
// import TopBar from '@/components/TopBar.vue'
import { goBack, judgeShowImage, uniNavigateTo } from '@/utils'
import CustomApi from '@/service/custom'
import { getAllTown, getDictDetail, dictMap } from '@/service/dict'
import { useDictStore } from '@/store/dict'
import TopBar from '@/components/TopBar.vue'
import TalentApi from '@/service/talent'
import ContentBox from '@/components/ContentBox.vue'
import CollapseBox from './components/CollapseBox.vue'

const dictStore = useDictStore()

// 获取状态栏高度
const { statusBarHeight } = uni.getSystemInfoSync()

// const townList = ref([])
// const getTownList = async () => {
//   const { code, result } = await getAllTown()
//   if (code === 200 && result) {
//     townList.value = result
//   }
// }
// getTownList()

// const categoryList = ref([])
// const getDict = async () => {
//   const { code, result } = await getDictDetail(dictMap.jointActivityCategory)
//   if (code === 200 && result) {
//     categoryList.value = result
//   }
// }
// getDict()

// const filterList = ref([
//   { field: 'aa', columns: [{ label: '', value: '' }] },
//   { field: 'bb', columns: [{ label: '', value: '' }] },
// ])
// const filterList = computed(() => {
//   const { jointActivityCategory } = dictStore.dictData
//   const cList = jointActivityCategory || categoryList.value
//   return [
//     {
//       field: 'sysOrgCode',
//       columns: [{ label: '全部乡镇', value: '' }, ...townList.value],
//     },
//     {
//       field: 'category',
//       columns: [{ label: '全部类型', value: '' }, ...cList],
//     },
//   ]
// })

// const filterParams = ref({
//   sysOrgCode: '',
//   category: '',
// })
// const handleChangeFilter = (val) => {
//   console.log('va', val)
//   filterParams.value.category = val.category.value
//   filterParams.value.sysOrgCode = val.sysOrgCode.value
//   refreshList()
// }

/** ----------- 分页加载 start --------- */
const pageObj = ref({
  pageNo: 1,
  pageSize: 10,
})
const scrollState = reactive({
  refresherTriggered: false,
  dataList: [],
  loadState: 'loading',
})

const getDataList = async () => {
  if (scrollState.loadState === 'finished') return
  try {
    const params = {
      ...pageObj.value,
      // ...filterParams.value,
      type: activeTab.value,
      search: keyword.value,
      column: 'createTime',
      order: 'desc',
    }
    const { code, result } = await TalentApi.getTalentPage(params)
    if (code === 200 && result) {
      const { records, pages } = result
      if (records?.length) {
        scrollState.dataList = [
          ...scrollState.dataList,
          ...records.map((item) => ({
            ...item,
            expand: false,
          })),
        ]
      }
      if (pageObj.value.pageNo < pages) {
        pageObj.value.pageNo++
      } else {
        scrollState.loadState = 'finished'
      }
    } else {
      scrollState.loadState = 'error'
    }
  } catch (e) {
    scrollState.loadState = 'error'
  }
}

const reset = () => {
  pageObj.value.pageNo = 1
  scrollState.dataList = []
  scrollState.loadState = 'loading'
}

const onRefresherrefresh = async () => {
  scrollState.refresherTriggered = true
  await refreshList()
  scrollState.refresherTriggered = false
}

const refreshList = async () => {
  try {
    uni.showLoading()
    reset()
    await getDataList()
  } finally {
    uni.hideLoading()
  }
}
/** ----------- 分页加载 end --------- */
const keyword = ref('')

const tabList = [
  { label: '礼堂管理员', value: 'admin' },
  { label: '文化特派员', value: 'commissioner' },
  { label: '新时代文明实践大使', value: 'ambassador' },
]
const activeTab = ref('')

const handleCheckTab = (val) => {
  activeTab.value = val
  refreshList()
}
handleCheckTab(tabList[0].value)

const toggleExpand = (item) => {
  console.log('items', item)
  if (item.expand) {
    item.expand = true
  } else {
    item.expand = false
  }
  // expandValue.value = item.value
}
// const expandValue = ref(false)
</script>

<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<template>
  <view class="common-page-bg">
    <view
      class="page-header"
      :style="{
        paddingTop: `${statusBarHeight}px`,
      }"
    >
      <view class="page-header-nav">
        <view @tap="goBack()">
          <wd-icon
            name="chevron-left"
            size="56rpx"
            color="#fff"
          ></wd-icon>
        </view>
        <view class="page-header-nav-title">文化运维库</view>
      </view>
      <TopBar
        :tab-list="tabList"
        :active-tab="activeTab"
        @check="handleCheckTab"
      />
    </view>
    <view class="p-24rpx">
      <view class="search-box">
        <wd-search
          v-model="keyword"
          placeholder="输入姓名/礼堂名称查询"
          placeholder-left
          cancel-txt="搜索"
          clearable
          @search="refreshList"
          @clear="refreshList"
          @cancel="refreshList"
        />
      </view>
    </view>
    <scroll-view
      class="scroll-container"
      scroll-y
      refresher-enabled
      enable-back-to-top
      :refresher-triggered="scrollState.refresherTriggered"
      @refresherrefresh="onRefresherrefresh"
      @scrolltolower="getDataList"
    >
      <template v-if="scrollState.dataList.length">
        <ContentBox
          v-for="item in scrollState.dataList"
          :key="item.id"
        >
          <!-- <view class="flex mb-24rpx">
            <image
              class="talent-item-avatar"
              :src="judgeShowImage(item.avatarUrl)"
              mode="aspectFill"
            ></image>
            <view class="flex flex-col justify-between py-8rpx">
              <view class="talent-item-name">{{ item.name }}</view>
              <view class="talent-item-hall">{{ item.work }}</view>
            </view>
          </view>
          <view class="talent-item-note">
            <CollapseBox :content="item.note" />
          </view> -->
          <view class="flex">
            <view class="flex flex-col items-center mr-24rpx">
              <image
                class="talent-item-avatar"
                :src="judgeShowImage(item.avatarUrl)"
                mode="aspectFill"
              ></image>
              <view class="talent-item-name">{{ item.name }}</view>
            </view>
            <view>
              <view class="flex items-center mb-8rpx">
                <view class="talent-item-label">
                  {{ item.type === 'admin' ? '所属礼堂' : '结对村' }}：
                </view>
                <view class="talent-item-value">{{ item.work }}</view>
              </view>
              <view class="flex items-start">
                <view class="talent-item-label">介绍：</view>
                <view class="talent-item-value">{{ item.note }}</view>
              </view>
            </view>
          </view>
        </ContentBox>
        <wd-loadmore
          finished-text="没有更多了"
          :state="scrollState.loadState"
          @reload="getDataList"
        />
      </template>
      <wd-status-tip
        v-else
        image="content"
        tip="暂无内容"
      />
    </scroll-view>
    <!-- <view class="float-btn">
      <image class="w-full h-full" src="@/static/icons/float-btn-custom.png"></image>
    </view> -->
  </view>
</template>

<style lang="scss" scoped>
.common-page-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.page-header {
  position: relative;
  z-index: 1;
  width: 100%;
  background-image: linear-gradient(90deg, #64e1ff 0%, #2f8de4 100%);
  box-sizing: border-box;

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  &-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    // width: 100%;
    height: 88rpx;
    padding: 0 24rpx;

    &-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}

.scroll-container {
  padding: 0 24rpx;
  box-sizing: border-box;
}

.talent-item {
  &-avatar {
    width: 120rpx;
    height: 120rpx;
    border: 2rpx solid rgba(238, 238, 238, 1);
    border-radius: 16rpx;
  }

  &-name {
    font-size: 32rpx;
    font-weight: 500;
    color: $uni-text-color;
    font-weight: 500;
  }

  &-hall {
    font-size: 28rpx;
    color: $uni-text-color-grey;
  }

  &-note {
    --wot-collapse-side-padding: 0;
    --wot-color-white: transparent;

    padding: 24rpx;
    font-size: 28rpx;
    color: $uni-text-color-grey;
    background: #f4f7fc;
    border-radius: 8rpx;

    :deep(.wd-collapse__more) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  &-label {
    flex-shrink: 0;
    font-size: 28rpx;
    color: $uni-text-color-grey;
  }

  &-value {
    font-size: 28rpx;
    color: $uni-text-color;
  }
}

.search-box {
  --wot-search-cancel-fs: 28rpx;

  border-radius: 16rpx;
  overflow: hidden;
}
</style>
